/* 添加/修改 文件*/
import React from 'react';
import { Form, Button, Layout, Input, Radio, Icon, Modal } from 'antd';
import { message, Select } from 'antd/lib/index';
import { queryList } from '../../project-config/services/modularInfo'
import { addFileInfoApi } from '../../project-config/services/project'
import { queryTable } from '../../project-config/services/dataInfo'
import style from './style.less'


const FormItem = Form.Item;
const Option = Select.Option;

class FileForm extends React.Component {

  projectId = '';
  updateCallBackFun;

  defaultModule = {
    id: '0',
    name: '',
    showName: '-公共模块-'
  };
  defaultSuper = {
    id: '0',
    name: '',
    comment: '-无继承-'
  };

  state = {

    visible: false,

    superFileList: [this.defaultSuper], // 继承对象
    moduleList: [this.defaultModule], //
    fileTypeList: ['controller', 'service', 'domain', 'vo', 'page', 'dao'],
    classTypeList: ['class', 'enum'],

    // form value
    formData: {
      name: '',
      superId: '0', // 继承ID
      paradigm: 'no',
      fileType: 'controller',
      moduleId: '0',
      classType: 'class'
    },
  };

  constructor(props) {
    super(props);

  }

  componentDidMount() {
    this.props.onRef(this);
    this.projectId = this.props.projectId;
    queryList({ projectId: this.props.projectId })
      .then(res => {
        this.setState({ modularList: [...res.data, ...this.state.moduleList] })
      });

    if (this.props.modularList) {
      this.state.moduleList = [...this.props.modularList, ...this.state.moduleList]
    }
  }

  fetchTableList = (value) => {

    if (value === 'vo') {
      let ret = queryTable({
        projectId: this.projectId,
        from: 'vo'
      });
      ret.then(res => {
        let _list = res.data ? res.data : [];
        let list = [this.defaultSuper, ..._list];

        this.setState({
          ...this.state,
          superFileList: list
        });
      })
    } else {
      this.setState({
        ...this.state,
        superId: 0,
        superFileList: [this.defaultSuper]
      });
    }
  };


  showFileFormPanel = (fileObj, callFun) => {
    const { formData } = this.state;
    this.updateCallBackFun = callFun;
    this.fetchTableList(fileObj.fileType);
    this.props.form.resetFields();
    let _state = {
      ...this.state,
      formData: { ...formData, ...fileObj },
      visible: true
    };
    this.setState(_state);
  };


  handleOk = () => {
    let that = this;
    const { microId } = this.props;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let formData = that.props.form.getFieldsValue();
        formData.projectId = that.projectId;
        formData.microId = microId;

        /***/
        let addFunRet = addFileInfoApi(formData);
        addFunRet.then((res) => {
          that.updateCallBackFun('add');
          message.success('保存成功！');
          that.setState({
            ...this.state,
            visible: false
          })
        });
      }
    });
  };

  handleCancel = () => {
    this.setState({
      ...this.state,
      visible: false
    });
    if (this.updateCallBackFun) {
      this.updateCallBackFun('close');
    }
  };

  selectDomain = (id) => {
    console.log(id)
    const { superFileList, formData } = this.state;
    const seldDomain = superFileList.filter(value => value.id === id)[0];
    this.setState({
      formData: {
        ...formData,
        name: seldDomain.name + 'Vo'
      }
    })
  };

  render() {

    const { getFieldDecorator } = this.props.form;
    const { formData } = this.state;

    let mList = [...this.props.modularList, ...this.state.moduleList];

    const addFileFormLayout = {
      labelCol: {
        xs: { span: 1 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 16 },
        sm: { span: 16 },
      },
    };
    const inputWidth = '60%';
    return (<Modal
      width={800}
      keyboard={false}
      maskClosable={false}
      visible={this.state.visible}
      title="添加文件"
      onOk={this.handleOk}
      onCancel={this.handleCancel}
      footer={[
        <Button key="back" onClick={this.handleCancel}>关闭</Button>,
        <Button key="submit" type="primary" loading={false} onClick={this.handleOk}>
          确定
        </Button>,
      ]}
    >

      <Form className={style.fromMargin}>
        <FormItem label="所属模块" {...addFileFormLayout} >
          {getFieldDecorator('moduleId', {
            initialValue: formData.moduleId,
            rules: [{
              required: true,
              message: '情选择'
            }],
          })(
            <Select style={{ width: inputWidth }}>
              {mList.map((value, index) => {
                return (<Option key={'module_list_' + index}
                                value={value.id}>{value.name}-{value.showName}</Option>)
              })}
            </Select>
          )}
          <span> * 所属模块</span>
        </FormItem>
        <FormItem label="继承对象" {...addFileFormLayout} >
          {getFieldDecorator('superId', {
            initialValue: formData.superId,
            rules: [{
              required: true,
              message: '请选择!'
            }],
          })(
            <Select style={{ width: inputWidth }} onChange={this.selectDomain.bind(this)}>
              {this.state.superFileList.map((value, index) => {
                return (<Option key={'super_file_' + index}
                                value={value.id}>{value.name}-{value.comment}</Option>)
              })}
            </Select>
          )}
          <span> 继承对象</span>
        </FormItem>
        <FormItem label="文件名称" {...addFileFormLayout} >
          {getFieldDecorator('name', {
            initialValue: formData.name,
            rules: [{
              required: true,
              message: '请输入!'
            }],
          })(
            <Input style={{ width: inputWidth }}/>
          )}
          <span> * 文件名称类名</span>
        </FormItem>

        <FormItem label="文件类型" {...addFileFormLayout} >
          {getFieldDecorator('fileType', {
            initialValue: formData.fileType,
            rules: [{
              required: true,
              message: '请选择！'
            }],
          })(
            <Select onChange={this.fetchTableList} style={{ width: inputWidth }}>
              {this.state.fileTypeList.map((value, index) => {
                return (<Option key={'file_type_' + index} value={value}>{value}</Option>)
              })}
            </Select>
          )}
          <span> * 文件类型</span>
        </FormItem>


        <FormItem label="是否范型" {...addFileFormLayout} >
          {getFieldDecorator('paradigm', {
            initialValue: formData.paradigm,
            rules: [{
              required: true,
              message: '请选择!'
            }],
          })(
            <Radio.Group style={{ width: '40%' }}>
              <Radio.Button value="yes">是</Radio.Button>
              <Radio.Button value="no">否</Radio.Button>
            </Radio.Group>
          )}
          <span> * 是否范型</span>
        </FormItem>

        <FormItem label="类-类型" {...addFileFormLayout} >
          {getFieldDecorator('classType', {
            initialValue: formData.classType,
            rules: [{
              required: true,
              message: '请选择!'
            }],
          })(
            <Radio.Group style={{ width: '40%' }}>
              <Radio.Button value="class">class</Radio.Button>
              <Radio.Button value="enum">enum</Radio.Button>
            </Radio.Group>
          )}
          <span> * 类-类型</span>
        </FormItem>
      </Form>
    </Modal>)
  }
}

export default Form.create()(FileForm);
